require("./CustomSider.scss");
import React, { useEffect, useState } from "react";
import { Layout, Menu } from "antd";
import { MainContext } from "@/context";
import { adminTitle } from "@/utils/variable";
import logoUrl from "../../assets/images/vanOrder.png";
import { Link } from "react-router-dom";
import createIcons from "@/utils/icons";
import { getAllMenu,getPermissionMenus } from "@/api/menu";
const myIcons = createIcons(16);
const { SubMenu } = Menu;
const { Sider } = Layout;
export const CustomSider = () => {
    const [allMenu, setAllMenu] = useState([]);
    useEffect(() => {
        getPermissionMenus().then(res => {
            if (res.code === 200) {
                setAllMenu(res.data);
            }
        });
    }, []);
    const renderMenu = menuData => {
        return menuData.map(item => {
            if (item.children && item.children.length) {
                return (
                    <SubMenu key={item.path} icon={myIcons[item.icon]} title={item.title}>
                        {renderMenu(item.children)}
                    </SubMenu>
                );
            } else {
                return (
                    <Menu.Item key={item.path}>
                        <Link to={item.path}>{item.title}</Link>
                    </Menu.Item>
                );
            }
        });
    };
    return (
        <MainContext.Consumer>
            {({ collapsed }) => (
                <Sider trigger={null} collapsible collapsed={collapsed} theme="light">
                    <div className="logo-wrap flex-center">
                        <div style={{ backgroundImage: `url(${logoUrl})` }} />
                        {!collapsed ? <div className="ml-10">{adminTitle}</div> : ""}
                    </div>
                    <Menu theme="light" mode="inline" defaultSelectedKeys={["1"]}>
                        {renderMenu(allMenu)}
                    </Menu>
                </Sider>
            )}
        </MainContext.Consumer>
    );
};
export default CustomSider;
